<template>
  <div class="login_box">
    <div class="login_from">
      <p class="title">{{ title }}</p>
      <a-input class="m_input" v-model="loginData.user_telephone" @pressEnter="login" placeholder="请输入账号">
        <template #prefix>
          <img src="@/assets/login/login_user.png" alt class="img" />
        </template>
      </a-input>
      <a-input-password
        class="m_input"
        @pressEnter="login"
        v-model="loginData.account_password"
        placeholder="请输入密码"
      >
        <template #prefix>
          <img src="@/assets/login/login_lock.png" alt class="img" />
        </template>
      </a-input-password>
      <!-- <div class="code_box">
        <a-input
          class="m_input"
          style="width: 70%"
          @pressEnter="login"
          v-model="loginData.captcha"
          placeholder="请输入验证码"
        >
          <template #prefix>
            <img src="@/assets/login/login_safe.png" alt class="img" />
          </template>
        </a-input>
        <div class="code" @click="refreshCode">
          <img :src="captcha_img" style="width: 100%; height: 100%" alt="" />
        </div>
      </div> -->
      <a-button class="m_button" @click="login" :loading="loginLoading">登录</a-button>
      <div class="reg_for_box">
        <p class="forget_text" @click="$refs.registerRef.open()">注册账号</p>
        <p class="forget_text" @click="$refs.forgetPasswordRef.open()">忘记密码</p>
      </div>
      <p class="copyright" style="color: #9fa2a8">版权所有：{{ copyright }}</p>
    </div>

    <ForgetPassword ref="forgetPasswordRef" />
    <Register ref="registerRef" />
  </div>
</template>
<script>
import { mapActions } from 'vuex'
import defaultSettings from '@/config/defaultSettings'
import ForgetPassword from './forgetPassword'
import Register from './register.vue'

export default {
  components: {
    ForgetPassword,
    Register
  },
  data () {
    return {
      loginData: {
        user_telephone: '',
        account_password: ''
        // captcha: '',
        // captcha_token: ''
      },
      // captcha_img: '',
      title: defaultSettings.title,
      copyright: defaultSettings.copyright,
      loginLoading: false
    }
  },
  created () {
    const errMsg = {
      401: '登录过期',
      2008: '登录过期',
      2001: '登录过期'
    }
    if (this.$route.query.code) {
      this.$message.warning(errMsg[this.$route.query.code])
    }
    // this.refreshCode()
  },
  methods: {
    ...mapActions(['Login']),
    login () {
      this.Login(this.loginData)
        .then((res) => {
          if (res.code === 200) {
            this.$message.success('登录成功')
            this.$router.push({ path: '/' })
          } else {
            this.$message.error(res.msg)
          }
          this.loginBtn = false
        })
        .catch(() => {})
        .finally(() => {
          this.loading = false
        })
    }
    // refreshCode () {
    //   getCaptcha().then((res) => {
    //     this.loginData.captcha_token = res.data.captcha_token
    //     this.captcha_img = res.data.captcha
    //   })
    // },
  }
}
</script>
<style lang="less" scoped>
.login_from {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 72px 68px 56px 68px;
  width: 520px;
  background: #ffffff;
  box-shadow: 0px 20px 31px 0px rgba(0, 0, 0, 0.16), 0px 0px 20px 0px rgba(0, 0, 0, 0.04);
  border-radius: 8px;

  .title {
    margin-bottom: 48px;
    font-size: 24px;
    color: #000000;
    line-height: 36px;
    text-align: center;
  }

  .code_box {
    display: flex;

    .code {
      flex: 1;
      margin-left: 8px;
      height: 48px;
      cursor: pointer;
    }
  }

  .m_input {
    margin-bottom: 16px;
    height: 48px;
    background: #ffffff;

    :deep(.ant-input) {
      height: 100%;
      padding-left: 48px;
    }

    .img {
      width: 28px;
      height: 28px;
    }
  }

  .m_button {
    margin: 16px 0 24px 0;
    width: 100%;
    height: 56px;
    background: #1890ff;
    border-radius: 2px;
    font-size: 16px;
    color: #ffffff;
    line-height: 24px;
    border-color: #1890ff;
  }

  .reg_for_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 50px;
    box-sizing: border-box;
    margin-bottom: 24px;

    .forget_text {
      font-size: 16px;
      color: #1890ff;
      line-height: 24px;
      text-align: center;
      cursor: pointer;
    }
  }

  .copyright {
    font-size: 16px;
    color: #1890ff;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
  }
}
</style>
